<template>
  <div style="height: 100%;">
    <div class="carousel">
      <el-carousel :interval="4000" type="card" height="250px">
        <el-carousel-item v-for="(item,index) of imgList" :key="index">
          <img :src="item.img" style="width: 100%;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="text-align: left">
      <h3>推荐歌单></h3>
    </div>
    <div style="display: flex;justify-content: space-between;flex-wrap: wrap">
      <div v-for="(imgtime,imgindex) of divimgList" :key="imgindex" style="width: 23%;height: 300px;text-align: left">
           <img :src="imgtime.img" style="width: 99%;height: 80%;">
        <span style="font-size: 10px">{{imgtime.words}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "discovermusic",
  data() {
    return {
      imgList: [
        {img:require("../img/5676.jpg")},
        {img:require("../img/1232.jpg")},
        {img:require("../img/76856.jpg")},
        {img:require("../img/8009.jpg")},
      ],
      divimgList:[
        {words:"迷离男声|落幕的故事残留的余温",img:require("../img/231.jpg")},
        {words:"皮囊无趣 灵魂无光",img:require("../img/7687.jpg")},
        {words:"爱你是一种习惯",img:require("../img/8988.jpg")},
        {words:"辣妹平时都在听什么",img:require("../img/312.jpg")},
        {words:"2020年度最热欧美新歌TOP50",img:require("../img/122.jpg")},
        {words:"少女心狙击手",img:require("../img/4353.jpg")},
        {words:"极致温柔",img:require("../img/6756.jpg")},
        {words:"浪漫宿醉深蓝海底",img:require("../img/4332.jpg")},
        {words:"请往前走，不要在此停留",img:require("../img/2343543.jpg")},
        {words:"换不同的场景 但那都是你",img:require("../img/09808.jpg")},
        {words:"那些好听但却记不起歌名的歌曲",img:require("../img/342.jpg")},
        {words:"【治愈辑】所有遗憾都是为了未来的幸福做铺垫",img:require("../img/5464.jpg")},
        {words:"总要允许有人错过你，才能赶上最好的相遇",img:require("../img/53454.jpg")},
        {words:"希望戾气都悄悄溜走，余下的都是温柔",img:require("../img/8787.jpg")},
        {words:"恋爱不是目的 相遇才是",img:require("../img/322.jpg")},
        {words:"快乐有很多种，其中听歌是一种",img:require("../img/685.jpg")},
        {words:"其实生活很简单，过了今天就是明天",img:require("../img/8761.jpg")},
        {words:"夏日限定音品",img:require("../img/32532.jpg")},
        {words:"多看一眼就心软，拥抱一下就沦陷",img:require("../img/54654.jpg")},
        {words:"下班休闲时听，解压放飞自我",img:require("../img/121.jpg")},
      ]
    }

  },
  methods: {}
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>